<template>
	<view class="my-info">
		<u-cell-group>
			<u-cell size="large" title="头像" isLink @tap="setAvator">
				<u-avatar :src="user.avatar ? user.avatar:'@/static/images/profile/avator.png'" shape="square" size="30"
					slot='value'></u-avatar>
			</u-cell>
			<u-cell size="large" title="昵称" isLink>
				<u--input placeholder="请输入昵称" slot='value' border="none" inputAlign="right" v-model='user.nickname'>
				</u--input>
			</u-cell>
			<!-- <u-cell size="large" title="年龄" isLink>
				<u--input placeholder="请输入年龄" slot='value' border="none" inputAlign="right" v-model='user.age'>
				</u--input>
			</u-cell> -->
			<!-- <u-cell size="large" title="性别" :value="user.sex ? '男':'女'" isLink @tap="()=>isShowSexPicker=true">
			</u-cell> -->
			<!-- <u-cell size="large" title="简介" :value="user.profile" isLink @tap="showProfileModelClick">
			</u-cell> -->
		</u-cell-group>
		<view class="btn">
			<u-button type="primary" text="确定" @click="isConfirm=true"></u-button>
		</view>
		<u-modal :show="isConfirm" content="你确定要修改个人信息吗?" :closeOnClickOverlay="true" :showCancelButton="true"
			@cancel="isConfirm=false" @close="isConfirm=false" @confirm="updateUserInfo">
		</u-modal>
		<u-modal :show="showProfileModel" :closeOnClickOverlay="true" :showCancelButton="true"
			@cancel="setProfileModelclose" @close="setProfileModelclose" @confirm="setProfileValueConfirm">
			<view class="slot-content">
				<u--textarea v-model="user.profile" placeholder="请输入你的个人简介" count maxlength="20"></u--textarea>
			</view>
		</u-modal>
		<u-picker :show="isShowSexPicker" :columns="sex" keyName="name" @confirm="sexPicker"
			@cancel="()=>isShowSexPicker=false" :closeOnClickOverlay='true' @close="()=>isShowSexPicker=false">
		</u-picker>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getUserInfo,
		updateUserInfo
	} from '@/api/contents/user/user.js'
	import {uploadImg} from '@/api/contents/upload/upload.js'
	export default {
		data() {
			return {
				sex: [
					[{
						id: 0,
						name: '女'
					}, {
						id: 1,
						name: '男'
					}]
				],
				isShowSexPicker: false,
				showProfileModel: false,
				isConfirm: false,
				user: {
					avatar: '',
					nickname: '',
					phone: '',
					profile: '',
					sex: '',
					age: '',
				},

			};
		},
		methods: {
			sexPicker(data) {
				this.user.sex = data.indexs[0]
				this.isShowSexPicker = false
			},
			setAvator() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (fileList) => {
						this.user.avatar = fileList.tempFilePaths[0];
						// console.log(fileList.tempFiles[0]);
						// const file=fileList.tempFiles[0]
						// uploadImg({file:file}).then(res=>{	
						// 	if(res.code===0){
						// 		this.user.avatar=res.fullPath;
						// 	}
						// })
					}
				});
			},
			//弹出框关闭按钮
			setProfileModelclose() {
				this.setProfileValue = '';
				this.showProfileModel = false;
			},
			//弹出框确认按钮
			setProfileValueConfirm() {
				this.showProfileModel = false;
			},
			//点击打开弹出框
			showProfileModelClick() {
				this.setProfileValue = this.profile;
				this.showProfileModel = true;
			},
			// 获取用户信息
			getUserInfo() {
				getUserInfo().then(res => {
					
					this.user = res.data;
					this.$store.commit('updateUserInfo', res.data);
				})
			},
			// 更新用户信息
			updateUserInfo() {
				updateUserInfo({
					nickname:this.user.nickname,
					avatar:this.user.avatar
				}).then(res => {
					if (res.code == 0) {
						this.getUserInfo();
						this.isConfirm = false;
						this.$refs.uToast.show({
							message: '保存成功！',
							complete() {
								uni.navigateBack();
							}
						})

					}
				})
			}
		},
		onLoad() {
			this.getUserInfo();
		}
	}
</script>

<style lang="scss" scoped>
	.my-info {

		// background-color: #F5F7FA;
		// // #ifdef H5
		// height: calc(100vh - 44px);
		// //  #endif
		// // #ifdef MP-WEIXIN
		// height: 100vh;
		// // #endif
		.btn {
			padding: 30upx;
		}

		.slot-content {
			width: 100%;
		}
	}
</style>
